.home_container {
  .class_container {
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;

    .class_item {
      padding: 8px 15px;
      cursor: pointer;
      margin: 10px;
      background-color: #f6f7f8;
      border-radius: 8px;
      transition: background 0.22s;

      &:hover {
        background-color: #eee;
      }
    }
  }

  .recommend_container {
    height: 400px;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    padding: 0;

    .spaceStyle {
      position: absolute;
      top: 100px;
      left: 100px;
    }
  }

  .content_container {
    //min-height: 100vh;
    font-size: 18px;
    padding: 0;

  }
}


[theme-mode='dark'] {
  .header {
    background-color: rgba(35, 36, 41, 1);
  }

  .class_item {
    background-color: rgba(35, 36, 41, 1) !important;
    color: var(--semi-color-text-0);
  }

}


/* 超小屏设备 */
@media (max-width: 575px) {
  .recommend_container {
    height: 150px !important;
  }

  .class_item {
    font-size: 14px;
    margin: 6px !important;
  }

  .spaceStyle {
    top: 50px !important;
  }
}

/* 小屏设备 */
@media (min-width: 576px) and (max-width: 767px) {

}

/* 平板等中等设备 */
@media (min-width: 768px) and (max-width: 991px) {

}

/* 普通PC显示器 */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* 宽屏设备 */
@media (min-width: 1200px) and (max-width: 1399px) {

}

/* 超宽屏设备 */
@media (min-width: 1400px) {

}
